import './LoginA01.scss'
import { useState } from 'react'
import { Button, QRCode } from 'antd'

const LoginA01 = ({ SignPage, btnText }) => {
    const [Active, setActive] = useState(1)
    const [Amina, setAmina] = useState(false)
    const onAmina = () => {
        setAmina(true)
        setTimeout(() => setAmina(false), 1500)
    }

    return (
        <div className='LoginA01'>
            <div className="Box">
                <div className={`Back A ${Active === 2 && 'is_txl'}`}>
                    <div className='Title'>公共平台</div>
                    <SignPage btnText={btnText} />
                </div>
                <div className={`Back B ${Active === 2 && 'is_txl is_z200'}`}>
                    <div className='Title'>微信扫码</div>
                    <QRCode value={'https://baidu.com'} size={240} />
                </div>
                <div className={`Switch ${Active === 2 && 'is_txr'} ${Amina ? 'is_gx' : ''}`}>
                    <div className={`SwitchCircle ${Active === 2 && 'is_txr'}`} />
                    <div className={`SwitchCircle T ${Active === 2 && 'is_txr'}`} />
                    <div className={`SwitchContainer ${Active === 2 && 'is_hidden'}`}>
                        <div className='Title'>欢迎回来 !</div>
                        <div className='Text'>请使用您的个人信息登录</div>
                        <Button
                            size='large'
                            shape="round"
                            onClick={() => {
                                setActive(2)
                                onAmina()
                            }}>
                            扫码登录
                        </Button>
                    </div>
                    <div className={`SwitchContainer ${Active === 1 && 'is_hidden'}`}>
                        <div className='Title'>你好, 朋友 !</div>
                        <div className='Text'> 打开您的微信 , 与我们一起开始旅程 </div>
                        <Button
                            size='large'
                            shape="round"
                            onClick={() => {
                                setActive(1)
                                onAmina()
                            }}>
                            帐密登录
                        </Button>
                    </div>
                </div>
            </div>
            {/* <div className='download'>插件下载</div> */}
        </div>
    );
};

export default LoginA01;